<template>
    <div class="login-main">
        <h1 style="position: absolute;bottom: 20px;left:40%;color:white;">LOGIN</h1>
        <h1 style="position: absolute;top: 20px;left:32%;color:white;">LOGIN</h1>
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon label-width="30" class="demo-ruleForm">
            <el-form-item>
                <el-input v-model="ruleForm.account" type="text" placeholder="账号" style="width:250px;" />
            </el-form-item>
            <el-form-item>
                <el-input v-model="ruleForm.password" type="password" placeholder="密码" style="width:250px;" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)"
                    style="position: relative;top:25px;left:25px;">
                    登录
                </el-button>
                <el-button @click="resetForm(ruleFormRef)" style="position: relative;top:25px;left:85px;">清空</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import axios from 'axios'
onMounted(() => {
    // sessionStorage.setItem('Head','https://img0.baidu.com/it/u=3422287847,344441285&fm=253&fmt=auto&app=120&f=JPEG?w=604&h=500')
    // sessionStorage.setItem('Name','lijjjyu');
    // sessionStorage.setItem('Account','12345563455')
    // console.log('account',sessionStorage.getItem('Account'));
})

const ruleForm = ref({
    account: '',
    password: '',
})
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter();
const ruleFormRef = ref<FormInstance>()
import { useStore } from 'vuex'
const store = useStore();
import { serverAddress } from '@/config'
const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            if (ruleForm.value.account !== '' && ruleForm.value.password !== '') {
                sessionStorage.setItem('Account', ruleForm.value.account)
                sessionStorage.setItem('Password', ruleForm.value.password)
                axios({
                    url: 'https://apifoxmock.com/m2/4743995-0-default/192728289',
                    // url:`${serverAddress}/user/login`,
                    method: 'POST',
                    data: {
                        userEmail: ruleForm.value.account,
                        userPassword: ruleForm.value.password,
                    }
                }).then((response) => {
                    if (response.data.code === 1) {
                        sessionStorage.setItem('Head', response.data.data.userHead)
                        store.state.UserInformation.Head = response.data.data.userHead
                        sessionStorage.setItem('Name', response.data.data.userName);
                        store.state.UserInformation.Name = response.data.data.userName
                        sessionStorage.setItem('Account', response.data.data.userEmail)
                        store.state.UserInformation.Account = response.data.data.userEmail
                        sessionStorage.setItem('JWT', response.data.data.userJWT)
                        store.state.UserInformation.JWT = response.data.data.userJWT
                        sessionStorage.setItem('ID', response.data.data.userId)
                        store.state.UserInformation.Id = response.data.data.userId
                        ElMessage({
                            message: '登录成功',
                            type: 'success',
                        })
                        if (router.currentRoute.value.path !== '/Home') {
                            router.replace('/Home');
                        }
                    } else {
                        ElMessage({
                            message: '登录失败',
                            type: 'warning',
                        })
                    }
                }).catch((error) => {
                    ElMessage({
                        message: '登录失败',
                        type: 'warning',
                    })
                })
            } else {
                ElMessage({
                    message: '请填写完整',
                    type: 'warning',
                })
            }
        } else {
            console.log('error submit!')
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    ruleForm.value.account = '';
    ruleForm.value.password = '';
}
</script>
<style scoped>
.login-main {
    position: absolute;
    width: 100%;
    height: 100%;
}

.demo-ruleForm {
    position: absolute;
    top: 110px;
}
</style>